<script setup lang="ts"></script>

<template>
  <nav class="mt-3">
    <ul
      class="flex flex-col text-xl *:block *:h-14 *:pt-3 *:text-c_gray *:duration-200 hover:*:bg-c_litegray hover:*:text-c_lilu"
    >
      <li>
        <router-link
          class="flex h-full w-full bg-dashboardG bg-[length:24px_24px] bg-center bg-no-repeat hover:bg-dashboardP"
          to="/SoViBoard"
        ></router-link>
      </li>
      <li>
        <router-link
          class="flex h-full w-full bg-sportG bg-[length:24px_24px] bg-center bg-no-repeat hover:bg-sportP"
          to="/SportsRound"
        >
        </router-link>
      </li>
      <li>
        <router-link
          class="flex h-full w-full bg-cookingG bg-[length:24px_24px] bg-center bg-no-repeat hover:bg-cookingP"
          to="/WTC"
        >
        </router-link>
      </li>
      <li>
        <router-link
          class="flex h-full w-full bg-codingG bg-[length:24px_24px] bg-center bg-no-repeat hover:bg-codingP"
          to="/Coding"
        >
        </router-link>
      </li>
    </ul>
  </nav>
</template>
